<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" type="index" :index="indexMethod" width="80" />
    <el-table-column label="文章标题" min-width="300">
      <template #default="{row}">
        <span>{{row.title}}</span>
        <a @click.prevent="handlePreview(row.videoURL)" v-if="show(row.videoURL)" href="#" class="el-icon-film"></a>
      </template>
    </el-table-column>
    <el-table-column prop="visits" label="阅读量" min-width="150" />
    <el-table-column prop="username" label="录入人" min-width="160" />
    <el-table-column label="录入时间" min-width="200">
      <template #default="{row}">
        {{getTime(row.createTime)}}
      </template>
    </el-table-column>
    <el-table-column prop="state" label="状态" min-width="100">
      <template #default="{row}">{{row.state?'已启用':'已禁用'}}</template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="180">
      <template #default="{row}">
        <el-button @click="handleClick(row)" type="text" size="small">预览</el-button>
        <el-button @click="changeState(row)" type="text" size="small">
          {{row.state?'禁用':'启用'}}
        </el-button>
        <el-button @click="openDialog(row)" :disabled="!!row.state" type="text" size="small">修改</el-button>
        <el-button @click="del(row.id)" :disabled="!!row.state" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import { getTimes } from '@/utils'

export default {
  name: 'ArticlesTable',
  props: {
    page: {
      type: Number,
      default: 1
    },
    pages: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      tableData: [{
        id: 31,
        title: 'reye',
        articleBody: '<p>regre</p>',
        videoURL: '1',
        visits: 10,
        state: 0,
        creatorID: 2,
        createTime: '2022-06-29T07:46:43.000Z',
        username: '超级管理员'
      }]
    }
  },
  methods: {
    // 修改
    openDialog(row) {
      // console.log(row)
      this.$emit('openDialog', row)
    },
    // 删除
    del(id) {
      // console.log(id)
      // 提示消息
      this.$confirm('此操作将永久删除该文章, 是否继续?', {
        type: 'warning'
      }).then(async() => {
        const res = await remove({ id })
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        const data = await this.getlist({ page: this.page, pagesize: this.pageSize })
        // console.log(data)
        if (data.pages >= 1 && data.items.length === 0) {
          // console.log(1)
          this.$emit('pageChange')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 改变状态
    async changeState(row) {
      // console.log(row)
      row.state = row.state ? 0 : 1
      await changeState({ id: row.id, state: row.state })
      this.$message.success('操作成功')
    },
    handleClick(row) {
      console.log(row)
      this.$emit('handleClick', row)
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },

    // 标题后面的小图标
    show(val) {
      return val
    },
    getTime(time) {
      // const date = new Date(time)
      // const Y = date.getFullYear()
      // const M = (date.getMonth() + 1 + '').padStart(2, '0')
      // const D = (date.getDate() + '').padStart(2, '0')
      // return Y + '-' + M + '-' + D
      return getTimes(time)
    },
    async getlist(data) {
      const res = await list(data)
      // console.log(res)
      if (res.status !== 200) return this.$message('获取列表失败')
      this.tableData = res.data.items
      this.$emit('getpages', res.data.counts, res.data.pages)
      return res.data
    },
    // 预览视频
    handlePreview(url) {
      this.$emit('handlePreview', url)
    }
  },
  created() {
    // this.getlist(this.page, this.pageSize)
    this.getlist({ page: this.page, pagesize: this.pageSize })
  }

}
</script>

<style lang="scss" scoped>
.el-icon-film {
  padding-left: 5px;
  color: blue;
}
</style>
